// import { compile } from 'vue-template-compiler';
import { renderSlot, defineComponent } from "vue";

var ctx;
export default defineComponent({
  props: ["comName", "class", "collapseID", "parentID", "collapseIDs"],
  data() {
    return {};
  },
  watch: {},
  created() {
    ctx = this;
    // ctx.customCom = {}
    // for (const [key, com] of Object.entries(ElementPlus)) {
    //   ctx.customCom[key] = com
    // }
  },
  methods: {
    // getChild(conf, index) {
    //   ctx = this
    //   let com = window._customComponents[conf.comName]??ctx.customCom[conf.comName] ?? conf.comName
    //   return (
    //     <com {...conf} name={index}>
    //       {" "}
    //       {conf.childNode?.length
    //         ? conf.childNode.map((e: any) => ctx.getChild(e))
    //         : conf.innerText ?? conf.contentText}{" "}
    //       {ctx.getSlot(conf.slotNames)}
    //     </com>
    //   )
    // },
    // getSlot(arr) {
    //   if (!arr || !Array.isArray(arr)) return null
    //   let slots = arr.map((e) => (
    //     <template>
    //       <slot name={e}></slot>
    //     </template>
    //   ))
    //   return slots
    // }
  },
  render(ctx) {
    let conf = ctx;
    let child = <div></div>;

    // if (conf.childNode.length) {

    //   child = conf.childNode.map(e => {
    //     let conf = e
    //     let com = window._customComponents[conf.comName] ?? conf.comName
    //     if (conf.comName?.includes('llapse'))

    //       return (< com v-model={ctx.list}>
    //         {conf.childNode.map((e, i) => ctx.getChild(e, i))}
    //         {ctx.getSlot(conf.slotNames)}
    //       </com >)
    //     return (< com>
    //       {conf.childNode.map((e, i) => ctx.getChild(e, i))}
    //       {ctx.getSlot(conf.slotNames)}
    //     </com >)

    //   })
    //   return child
    // }
    // // return <div>{conf.comName}</div>

    // else return <div >{conf.comName}</div>
    // let code = `<div>tettttt<slot ></slot></div>`

    // const render = compile(code).render;
    // return render.call(ctx)
    // return <div>tettttt{renderSlot(ctx.$slots, 'default')}</div>
    // let body =
    //   (ctx.parentID || ctx.parentID == 0) && ctx.collapseIDs && !ctx.collapseIDs.includes(ctx.parentID)
    //     ? null
    //     : renderSlot(ctx.$slots, "body");
    let body =
      (ctx.collapseID || ctx.collapseID == 0) && ctx.collapseIDs && !ctx.collapseIDs.includes(ctx.collapseID)
        ? null
        : renderSlot(ctx.$slots, "body");
    return (
      <el-collapse-item
        name={ctx.collapseID}
        key={ctx.collapseID}
        v-slots={{ title: () => renderSlot(ctx.$slots, "title") }}
      >
        {body}
      </el-collapse-item>
    );
    // return (
    //   <el-collapse  v-model={ctx.collapseIDs} >
    //     <el-collapse-item name={0} key={0} v-slots={{ 'title': renderSlot(ctx.$slots, "title") }} >
    //       {/*  {{ 'title': <template >{renderSlot(ctx.$slots, "title")}</template> }} */}
    //       {renderSlot(ctx.$slots, "body")}

    //       {/*    <slot name={'body'}></slot> */}
    //     </el-collapse-item>
    //   </el-collapse>
    // )
  },
});
